<template>
  <div>
    <h3>商品清单如下 :</h3>
    <span v-for="(item, index) in foodList" :key="index"
      >{{ item.shopName }}
      <span>{{ item.price }}元/份</span>
      <br />
    </span>
    <h3>请选择购买数量 :</h3>
    <BuyFood
      v-for="(item, index) in foodList"
      :key="index + 999"
      :obj="item.shopName"
      v-model="item.count"
    ></BuyFood>
    <h3>
      总结为: <span>{{ sum }}</span>
    </h3>
  </div>
</template>

<script>
import BuyFood from "@/components/BuyFood.vue";
export default {
  components: {
    BuyFood,
  },
  props: {},
  data() {
    return {
      foodList: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  computed: {
    sum: {
      get() {
        return this.foodList.reduce(
          (sum, item) => (sum += item.count * item.price),
          0
        );
      },
    },
  },
  watch: {},
  created() {},
  methods: {},
};
</script>

<style scoped></style>
